<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/media.js"></script>
    <script src="js/common.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <style>
        .main-0 {
            display: none;
        }

        .active {
            display: block;
        }

        .swiper-container {
            width: 100%;
            height: 45vw;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <!-- <div class="top_all" style="width: 100%;height:2000px;position: fixed;z-index: 999999;background: #fff;top: 0;left: 0;right: 0;bottom:0;">
        本网页正在维护中！
    </div> -->
    <!--头部-->
    <div class="public-header flex" style="background:rgba(95,49,4,1);">
        <span class="public-header-left-search" style="background:url('img/搜索-搜索@2x.png') no-repeat left;background-size:contain;"
            onclick='window.location.href="page/search.html"'></span>
        <!-- <span class="public-header-left-back"></span> -->
        <span class="public-header-center">紫陶汇</span>
        <span class="public-header-right"></span>
    </div>
    <!--正文-->
    <div class="index-main bc-gray" >
        <nav class="flex">
            <a href="javascript:;" class="active">活动</a>
            <a href="javascript:;" @click='tab2Load()'>关注</a>
            <a href="javascript:;">专场拍</a>
            <a href="javascript:;" @click='tab4Load()'>私人订制</a>
            <a href="javascript:;" @click='tab5Load()'>精品</a>
        </nav>
        <div class="main">
            <!--活动-->
            <div class="main-1 main-0 active" style="padding-bottom:15vw;">
                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in slide_img">
                            <img :src="item.img" alt="" style="width:100%;height:100%" @click='link_buy(this)'>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
                <img :src="item.img" alt="loading" v-for='item in activity' @click='link_buy(this)'>
            </div>
            <!--关注-->
            <div class="main-2  main-0 ">
                <ul>
                    <li v-for='item in follow'>
                        <p class="main-2-1 flex" v-for='items in item'><span>{{items.store_name}}</span><em>已关注</em></p>
                        <img v-for='items in item' :src="items.store_image" class="user">
                        <div style="position:relative;" @click='link_buy(this)'>
                            <img v-for='items in item' :src="items.produce_head_image" class="product">
                            <p v-for='items in item' class="main-2-2">{{items.produce_title}}</p>
                        </div>
                        <p class="main-2-3" v-for='items in item'>{{items.produce_describe}}</p>
                        <p class="main-2-4 flex" v-for='items in item'>
                            <span @click='add_good(this)'>{{items.produce_good_num}}</span>
                            <em @click='add_Collection(this)'>{{items.produce_collect_num}}</em>
                            <i>{{items.produce_share_num}}</i>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="main-3  main-0" style="padding-bottom: 12vw;">
                <ul>
                    <li v-for='item in zhuanchang' @click='link_buy(this)'>
                        <img :src="item.produce_head_image" alt="">
                        <p class="bt">{{item.produce_title}}</p>
                        <p class="p1">专场状态： <span>拍卖进行中</span></p>
                        <p class="p1">截拍时间： <em>{{item.time_0}}-{{item.time_1}}</em></p>
                    </li>
                </ul>
            </div>
            <div class="main-4 main-0">
                <ul>
                    <li class="flex" v-for='item in order' @click='link(this)'>
                        <img :src="item.store.store_image" alt="">
                        <div class="center">
                            <p class="p1"> {{item.store.store_name}}</p>
                            <p class="p2">
                                <font v-for='items in item.type'>/{{items.firstTypeDiscribe}}</font>
                            </p>
                        </div>
                        <span></span>
                    </li>
                </ul>
            </div>
            <div class="main-5 main-0" style="padding-bottom: 18vw;">
                <ul>
                    <li v-for='item in jinxuan'>
                        <img :src="item.produce_head_image" alt="" @click='link_buy(this)'>
                        <div>{{item.produce_title}}</div>
                        <span @click='add_good(this)'>{{item.produce_good_num}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--底部-->
    <div class="public-footer flex">
        <div class="button-1 active">
            <span></span>
            <p>首页</p>
        </div>
        <div class="button-2" onclick="javascript:window.location.href='fenlei/fenlei.html'">
            <span></span>
            <p>分类</p>
        </div>
        <div class="button-3" onclick="javascript:window.location.href='faxian/faxian.html'">
            <span></span>
            <p>发现</p>
        </div>
        <div class="button-4" onclick="javascript:window.location.href='wode/my-page.html'">
            <span></span>
            <p>我的</p>
        </div>
    </div>
    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;"></div>
    <!--弹出框-->
    <div class="index-box" style="display:none;">
        <div class="top flex">
            <div class="left">
                <img src="img/二维码@2x.png" alt="">
                <p>二维码</p>
            </div>
            <div class="right">
                <img src="img/链接@2x.png" alt="">
                <p>发送链接</p>
            </div>
        </div>
        <div class="bottom">取消</div>
    </div>
    <script>
        $(function () {
            $('.index-main nav a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.main-0').eq(index).addClass('active').siblings().removeClass('active');
            })



        })
    </script>
    <script src='js/vue.js'></script>
    <script src='js/vue-resource.min.js'></script>
    <script>
        $(function () {
            // 获得本机ip，存储在session里
            window.sessionStorage.setItem('ip',returnCitySN["cip"])

            let weixin_code = getQueryString('code');
            var u_id = 1;
            // var u_id;
            // console.log(weixin_code) 
            // ! function () {
            //     $.ajax({
            //         url: base_url + 'ZITAOHUI/callBack',
            //         data: {
            //             code: weixin_code
            //         },
            //         success: function (data) {
            //             console.log(data)
            //             u_id = data.extend.list.user_Id;
            //             window.sessionStorage.setItem('u_id', u_id)
            //         },
            //         error: function (data) {
            //             console.log(data)

            //             console.error(1)
            //         }
            //     })
            // }()


            let num = getQueryString('num');
            if (num == 4) {
                $('nav a').eq(num).addClass('active').siblings().removeClass('active');
                $('.main-0').eq(num).addClass('active').siblings().removeClass('active');
            }

            new Vue({
                el: 'body',
                data: {
                    slide_img: [],
                    activity: [],
                    follow: [],
                    jinxuan: [],
                    order: [],
                    zhuanchang: []
                },
                ready: function () {

                    this.$http.get(base_url + 'ZITAOHUI/firstPage/huodong').then(
                        function (data) {
                            // console.log(data);
                            let all_data_tab1 = data.data.extend.data;
                            // console.log(all_data_tab1);
                            let alide_array = [];
                            let data_array = []
                            for (var i = 0; i < all_data_tab1.length; i++) {
                                let code = all_data_tab1[i].code;
                                if (code == true) {
                                    alide_array.push(all_data_tab1[i])
                                    // console.log(code)
                                } else {
                                    data_array.push(all_data_tab1[i])
                                }
                            }

                            this.$set('slide_img', alide_array.slice(0, 3))
                            this.$set('activity', data_array)

                            setTimeout(function () {

                                var swiper = new Swiper('.swiper-container', {
                                    pagination: '.swiper-pagination',
                                    nextButton: '.swiper-button-next',
                                    prevButton: '.swiper-button-prev',
                                    paginationClickable: true,
                                    spaceBetween: 30,
                                    centeredSlides: true,
                                    autoplay: 2500,
                                    autoplayDisableOnInteraction: false
                                });


                                for (let i = 0; i < alide_array.length; i++) {
                       
                                    if (alide_array[i].typ == 0) {

                                        $('#focus .hd ul li').eq(i).find('a').attr(
                                            'src', 'page/buy-info-page.4.html')
                                    } else if (alide_array[i].typ == 1) {
                                        $('#focus .hd ul li').eq(i).find('a').attr(
                                            'src', 'page/buy-info-page.4.html')
                                    }
                                }

                            }, 0);
                        },
                        function () {

                        })



                    this.$http.get(base_url + 'ZITAOHUI/firstPage/special').then(
                        function (data) {
                         
                            let all_data = data.data.extend.produce;
                            for (let i = 0; i < all_data.length; i++) {
                                let start = new Date(all_data[i].auction_time)
                                let end = new Date(all_data[i].auction_deadline)
                                all_data[i].time_0 = start.getMonth() + '.' + start.getDate() +
                                    ' ' + start.getHours() + ':' + start.getMinutes();
                                all_data[i].time_1 = end.getMonth() + '.' + end.getDate() + ' ' +
                                    end.getHours() + ':' + end.getMinutes();

                            }
                            this.$set('zhuanchang', all_data)
                        },
                        function () {

                        })



                    this.$http.get(base_url + 'ZITAOHUI/firstPage/jingxuan').then(
                        function (data) {
                            let all_data_tab12 = data.data.extend.data;
                            this.$set('jinxuan', all_data_tab12)

                        },
                        function () {

                        })
                },
                methods: {
                    tab2Load: function () {
                        this.$http.get(base_url + 'ZITAOHUI/firstPage/guanzhu', {
                            params: {
                                uid: u_id
                            }
                        }).then(
                            function (data) {
                          
                                let all_data_tab12 = data.data.extend.data;
            
                                this.$set('follow', all_data_tab12)

                            },
                            function () {

                            })
                    },
                    tab4Load: function () {
                        this.$http.get(base_url + 'ZITAOHUI/firstPage/order').then(
                            function (data) {
                                let all_data_tab12 = data.data.extend.data;
                        
                                this.$set('order', all_data_tab12)

                            },
                            function () {

                            })
                    },
                    tab5Load: function () {
                        this.$http.get(base_url + 'ZITAOHUI/firstPage/jingxuan').then(
                            function (data) {
                                let all_data_tab12 = data.data.extend.data;
                                this.$set('jinxuan', all_data_tab12)

                            },
                            function () {

                            })
                    },
                    link: function (t) {
                        window.location.href = 'page/custom-made.html?storeId=' + t.item.store.store_id
                    },
                    link_buy: function (t) {

                        if (t.item.typ == 1) {
                            window.location.href = 'page/buy-info-page.3.html?p_id=' + t.item.produce_id
                        } else if (t.item.typ == 0) {
                            window.location.href = 'page/buy-info-page.4.html?p_id=' + t.item.produce_id
                        } else if (t.item[0].typ == 0) {
                            window.location.href = 'page/buy-info-page.4.html?p_id=' + t.item[0].produce_id
                        } else if (t.item[0].typ == 1) {
                            window.location.href = 'page/buy-info-page.3.html?p_id=' + t.item[0].produce_id
                        }

                    },
                    add_good: function (t) {
                        console.log(t)

                        this.$http.get(base_url + 'ZITAOHUI/goodNum', {
                            params: {
                                produceId: t.item.produce_id,
                                user_id: u_id
                            }
                        }).then(
                            function (data) {
                                // console.log(data)
                                let sun = data.data.extend;
                                sun = sun.haha.list;
                                if (sun == 1) {
                                    t.items.produce_good_num += 1;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                } else {
                                    alert('您已经对该商品点过赞啦')
                                }
                            }
                        )
                    },
                    add_Collection: function (t) {
                        this.$http.get(base_url + 'ZITAOHUI/conllectionNum', {
                            params: {
                                produceId: t.items.produce_id,
                                user_id: u_id
                            }
                        }).then(
                            function (data) {
                                // console.log(data)
                                let sun = data.data.extend;
                                sun = sun.list.conllection;
                                if (sun == 1) {
                                    t.items.produce_collect_num += 1;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                } else {
                                    alert('您已经对该商品点过收藏啦')
                                }
                            }
                        )
                    }

                }
            })
        })
    </script>
</body>

</html>